<!-- 计时 -->
<template>
    <div class="timekeeping_box">
        <p class="timekeeping_text">
            {{secondStr}}
        </p>
        <div>
            <!-- 开始 -->
            <el-button v-show="run_status" type="danger" icon="el-icon-video-pause" @click="pause" plain circle/>
            <!-- 暂停 -->
            <el-button v-show="!run_status" type="primary" icon="el-icon-video-play" @click="start" plain circle/>
            <!-- 重置 -->
            <el-button type="info" icon="el-icon-refresh" @click="reset()" plain circle/>
        </div>
    </div>
</template>

<script>
import {secondFormat} from "@/utils/zzDouUtils/dateUtil"

export default {
    name: "timekeeping",
    watch: {
        second(n,o){
            this.formatSecond();
        }
    },
    data() {
        return {
            second: 0,
            secondStr: '00:00:00',
            run_status: false,
            timer: null,
        };
    },
    methods: {
        /** 开始 */
        start(){
            this.timer = setInterval(()=>{
                this.second++;
            },1000)
            this.run_status = !this.run_status;
        },
        /** 暂停 */
        pause(){
            this.clearTimer();
        },
        /** 重置 */
        reset(){
            this.clearTimer();
            this.second = 0;
        },
        /** 清空定时器 */
        clearTimer(){
            if (this.timer != null){
                clearInterval(this.timer);
            }
            if (this.run_status){
                this.run_status = !this.run_status;
            }
        },
        /** 格式化秒数 00:00:00 */
        formatSecond(){
            this.secondStr = secondFormat(this.second);
        }
    }
}
</script>
<style scoped>
.timekeeping_box{
    padding: 50px 10px 0 20px;
}
.timekeeping_text{
    float: left;
    color: #34bfa3;
    font-size: 30px;
    font-weight: bold;
    margin-top: 3px;
}
</style>
